<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> -->
    <script src="../js/jquery-3.7.1.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
    </script>
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.9.21-rc/dist/css/layui.css" rel="stylesheet">
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.9.21-rc/dist/layui.js"></script>
    <style>
        button{
            outline: none !important;
        }
        textarea{
            resize: none;
            overflow-y: auto;
        }
        td{
            max-width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-10">
            <!-- 搜索区域 -->
            <div class="panel panel-default">
                <div class="panel-heading">搜索</div>
                <div class="panel-body">
                    <form class="form-inline">
                        <div class="form-group">
                            <label>字段</label>
                            <select name="key" class="form-control" id="">
                                <option value="name">名称</option>
                                <option value="explain">介绍</option>
                                <option value="adminName">管理员</option>
                            </select>

                        </div>
                        <div style="margin-left: 20px;" class="form-group">
                            <label>值</label>
                            <input id="keyword" style="width: 130px;" type="text" class="form-control"
                                   id="exampleInputEmail2" placeholder="">
                        </div>
                        <div class="form-group" style="margin-left: 40px;">
                            <button id="search" type="button" class="btn btn-ms btn-info"> <span
                                    class="glyphicon glyphicon-zoom-in"></span>搜索
                            </button>
                        </div>
                        <div class="form-group" style="margin-left: 40px;">
                            <button id="add-building-info" type="button" class="btn btn-ms btn-primary"
                                    data-toggle="modal" data-target="#addModal"><span
                                    class="glyphicon glyphicon-plus"></span>添加楼宇
                            </button>
                        </div>
<!--                        <div class="form-group" style="margin-left: 40px;">-->
<!--                            <button class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span>删除-->
<!--                            </button>-->
<!--                        </div>-->
                    </form>
                </div>
            </div>
            <!-- 列表展示 -->
            <div>
                <table class="table table-striped table-hover">
                    <thead>
                    <tr>
                        <th style="width: 100px"><input type="checkbox">全选</th>
                        <th>序号</th>
                        <th>名称</th>
                        <th>介绍</th>
                        <th>管理员</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            <input type="checkbox">
                        </td>
                        <td>1</td>
                        <td>一号楼</td>
                        <td>计算机学院宿舍楼</td>
                        <td>高启强</td>

                        <td>
                            <button type="button" class="btn btn-info btn-xs">详情</button>
                            <button type="button" class="btn btn-warning btn-xs btn-primary" data-toggle="modal"
                                    data-target="#updateModal">编辑
                            </button>
                            <button type="button" class="btn btn-danger btn-xs">删除</button>
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox">
                        </td>
                        <td>2</td>
                        <td>二号楼</td>
                        <td>机械电气学院宿舍楼</td>
                        <td>高启盛</td>

                        <td>
                            <button type="button" class="btn btn-info btn-xs">详情</button>
                            <button type="button" class="btn btn-warning btn-xs btn-primary" data-toggle="modal"
                                    data-target="#updateModal">编辑
                            </button>
                            <button type="button" class="btn btn-danger btn-xs">删除</button>
                        </td>
                        <td></td>
                    </tr>
                    </tbody>
                </table>

                <nav aria-label="...">
                    共有<span id="total"></span>条记录
                    <span id="current-page"></span>/<span id="total-page"></span>页
                    <button class="btn btn-default btn-xs" id="index">首页</button>
                    <button class="btn btn-default btn-xs" id="prev">上一页</button>
                    <button class="btn btn-default btn-xs" id="next">下一页</button>
                    每页显示:
                    <select name="pageNumber">
                        <option value="5">5</option>
                        <option value="10">10</option>
                        <option value="15">15</option>
                    </select>
                    条
                    跳转到:
                    <input id="page-input" type="text" style="width: 50px">
                    <button class="btn btn-default btn-xs" id="jump">GO</button>
                </nav>

            </div>
        </div>
    </div>
</div>


<!-- 添加信息Modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">添加楼宇信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group ">
                        <label class="col-sm-2 control-label">名称</label>
                        <div class="col-sm-10">
                            <input id="buildingName" class="form-control" placeholder="请输入名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">介绍</label>
                        <div class="col-sm-10">
                            <textarea id="building-info" class="form-control" rows="5" placeholder="请输入楼栋介绍..."></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">管理员</label>
                        <div>
                            <select class="from-control" name="adminId">
                                <option>请选择</option>
                            </select>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="submit-btn" type="button" class="btn btn-primary">保存信息</button>
            </div>
        </div>
    </div>
</div>

                <!-- 详情Modal -->
<div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">楼宇信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group ">
                        <label class="col-sm-2 control-label">名称</label>
                        <div class="col-sm-10">
                            <input id="info_buildingName" readonly class="form-control" placeholder="请输入名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">介绍</label>
                        <div class="col-sm-10">
                            <textarea id="info_building-info" readonly class="form-control" rows="5" placeholder="请输入楼栋介绍..."></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">管理员</label>
                        <div class="col-sm-10">
                            <input id="info_AdminId" readonly class="form-control" placeholder="请输入管理员">
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>

            </div>
        </div>
    </div>
</div>

                                       <!-- 修改信息Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">修改楼宇信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group ">
                        <label class="col-sm-2 control-label">名称</label>
                        <div class="col-sm-10">
                            <input id="edit_buildingName" readonly class="form-control" placeholder="请输入名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">介绍</label>
                        <div class="col-sm-10">
                            <textarea id="edit_building-info" class="form-control" rows="5" placeholder="请输入楼栋介绍..."></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">管理员</label>
                        <div class="col-sm-10">
                            <input id="edit_adminId" readonly class="form-control" placeholder="请输入名称">
                        </div>
                    </div>
                    <hidden id="hidden-id"></hidden>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="editBuilding-btn" type="button" class="btn btn-primary">保存修改</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        //加载数据
        first_page(1, 5, '', '');
    })

    //加载分页数据
    function first_page(page, pageSize, key, value) {
        // var pageNumber = $('select[name="pageNumber"]').val();
        $.ajax({
            url: '../buildingManager',
            type: 'post',
            dataType: 'json',
            data: {
                'page': page,
                'pageSize': pageSize,
                'key': key,
                'value': value,
                'method':'paging'
            },
            success: function (result) {
                loadTableData(result, page, pageSize);
            },
            error: function () {
                layer.msg('网络异常');
            }
        })
    }

    //添加楼宇信息时的管理员列表
    $('#add-building-info').click(function () {
        //清空模态床数据
        $('#buildingName').val('');
        $('#building-info').val('');

        //清空下拉选列表
        $('select[name="adminId"]').empty();
        //添加第一项
        $('select[name="adminId"]').append('<option value="0">请选择你的英雄</option>');
        $.ajax({
            url: '../buildingManager',
            type: 'post',
            dataType: 'json',
            data: {
                'method': 'loadAdmin',
            },
            success: function (result) {
                if (result.code == 200) {
                    //添加管理员列表
                    for (let i = 0; i < result.data.length; i++) {
                        $('select[name="adminId"]').append('<option value="' + result.data[i].id + '">' + result.data[i].name + '</option>');
                    }
                } else {
                    layer.msg('请先添加管理员');
                }
            },
            error: function () {
                layer.msg('网络异常');
            }
        })
    })

    //提交楼宇信息
    $('#submit-btn').click(function () {
        var key = $('select[name=key]').val();
        var value = $('#keyword').val().trim();
        var pageNumber = $('select[name="pageNumber"]').val();
        //获取表单数据
        var name = $('#buildingName').val().trim();
        var explain = $('#building-info').val().trim();
        var adminId = $('select[name="adminId"]').val();
        var ok = true;

        if (name == '' || name == null || explain == '' || explain == null || adminId == 0) {
            ok = false;
            layer.msg('请输入正确的信息');
            return;
        }
        if (ok) {
            $.ajax({
                url: '../buildingManager',
                type: 'post',
                dataType: 'json',
                data: {
                    'method': 'add',
                    'name': name,
                    'explain': explain,
                    'adminId': adminId
                },
                success: function (result) {
                    if (result.code == 200) {
                        //重新加载第一页数据
                        layer.msg('添加成功');
                        //关闭,模态窗
                        $('#addModal').modal('hide');
                        first_page(1, pageNumber, key, value);
                    } else {
                        layer.msg('没有数据,添加失败');
                    }
                },
                error: function () {
                    layer.msg('网络异常');
                }
            })
        }
    })

    //下一页
    $('#next').click(function (){
        //获取当前的页码数
        var current_page = $('#current-page').text();
        //获取总页数
        var total_page = $('#total-page').text();
        //判断
        if (current_page >= total_page) {
            layer.msg('已经是最后一页了');
        }else {
            //获取每页显示条数
            var pageNumber = $('select[name="pageNumber"]').val();

            var key = $('select[name="key"]').val();

            var value = $('#keyword').val().trim();
            $.ajax({
                url:'../buildingManager',
                type:'post',
                dataType:'json',
                data:{
                    'method':'paging',
                    'page':parseInt(current_page)+1,
                    'pageSize':pageNumber,
                    'key':key,
                    'value':value
                },
                success:function (result){
                    //调用数据渲染函数
                    loadTableData(result,parseInt(current_page)+1,pageNumber);
                },
                error:function (){
                    layer.msg('网络异常');
                }
            })
        }
    })


    //上一页
    $('#prev').click(function (){
        //获取当前的页码数
        var current_page = $('#current-page').text();
        //获取总页数
        var total_page = $('#total-page').text();
        //判断
        if (current_page <= 1) {
            layer.msg('已经是第一页了');
        }else {
            //获取每页显示条数
            var pageNumber = $('select[name="pageNumber"]').val();

            var key = $('select[name="key"]').val();

            var value = $('#keyword').val().trim();
            $.ajax({
                url:'../buildingManager',
                type:'post',
                dataType:'json',
                data:{
                    'method':'paging',
                    'page':parseInt(current_page)-1,
                    'pageSize':pageNumber,
                    'key':key,
                    'value':value
                },
                success:function (result){
                    //调用数据渲染函数
                    loadTableData(result,parseInt(current_page)-1,pageNumber)
                },
                error:function (){
                    layer.msg('网络异常')
                }
            })
        }
    })

    //跳转指定页
    $('#jump').click(function (){
        //获取输入
        //获取当前的页码数
        var current_page = $('#page-input').val();
        //获取总页数
        var total_page = $('#total-page').text();
        if (current_page == '') {
            layer.msg('请输入页码');
        }else{
            //判断为是否为数字并且超范围
            //判断
            if (isNaN(current_page) || current_page > total_page || current_page < 1) {
                layer.msg('超出页码范围');
            }else {
                //获取每页显示条数
                var pageNumber = $('select[name="pageNumber"]').val();

                var key = $('select[name="key"]').val();

                var value = $('#keyword').val().trim();
                $.ajax({
                    url:'../buildingManager',
                    type:'post',
                    dataType:'json',
                    data:{
                        'method':'paging',
                        'page':current_page,
                        'pageSize':pageNumber,
                        'key':key,
                        'value':value
                    },
                    success:function (result){
                        //调用数据渲染函数
                        loadTableData(result,current_page,pageNumber)
                    },
                    error:function (){
                        layer.msg('网络异常')
                    }
                })
            }
        }
    })

    //切换每页显示的条数
    $('select[name="pageNumber"]').change(function (){
        //获取每页显示条数
        var pageNumber = $('select[name="pageNumber"]').val();

        var key = $('select[name="key"]').val();

        var value = $('#keyword').val().trim();
        $.ajax({
            url: '../buildingManager',
            type: 'post',
            dataType: 'json',
            data: {
                'method': 'paging',
                'page': 1,
                'pageSize': pageNumber,
                'key': key,
                'value': value
            },
            success: function (result) {
                //调用数据渲染函数
                loadTableData(result, 1, pageNumber)
            },
            error: function () {
                layer.msg('网络异常')
            }
        })
    })

    //搜索按钮
    $('#search').click(function (){
        //获取每页显示条数
        var pageNumber = $('select[name="pageNumber"]').val();
        var key = $('select[name="key"]').val();
        var value = $('#keyword').val().trim();
        $.ajax({
            url: '../buildingManager',
            type: 'post',
            dataType: 'json',
            data: {
                'method': 'paging',
                'page': 1,
                'pageSize': pageNumber,
                'key': key,
                'value': value
            },
            success: function (result) {
                //调用数据渲染函数
                loadTableData(result, 1, pageNumber)
            },
            error: function () {
                layer.msg('网络异常')
            }
        })
    })

    function loadTableData(result, current_page, pageNumber) {
        console.log(current_page);
        console.log(result)
        if (result.code == 200) {
            var data = result.data;
            var html = '';
            var admin_role = '';
            for (let i = 0; i < data.length; i++) {
                html += '<tr>\n' +
                    '\t\t\t\t\t\t\t\t\t<td>\n' +
                    '\t\t\t\t\t\t\t\t\t\t<input type="checkbox" data-id="' + data[i].id + '">\n' +
                    '\t\t\t\t\t\t\t\t\t</td>\n' +
                    '\t\t\t\t\t\t\t\t\t<td>' + (i + 1) + '</td>\n' +
                    '\t\t\t\t\t\t\t\t\t<td>' + data[i].name + '</td>\n' +
                    '\t\t\t\t\t\t\t\t\t<td>' + data[i].explain + '</td>\n' +
                    '\t\t\t\t\t\t\t\t\t<td>' + data[i].adminId + '</td>\n' +
                    '\t\t\t\t\t\t\t\t\t\n' +
                    '\t\t\t\t\t\t\t\t\t<td>\n' +
                    '\t\t\t\t\t\t\t\t\t\t<button type="button" class="btn btn-info btn-xs" onclick="info_btn(this)" data-toggle="modal" data-target="#infoModal">详情</button>\n' +
                    '\t\t\t\t\t\t\t\t\t\t<button type="button" class="btn btn-warning btn-xs btn-primary" onclick="edit_btn(this)" data-toggle="modal" data-target="#editModal">编辑</button>\n' +
                    '\t\t\t\t\t\t\t\t\t\t<button type="button" class="btn btn-danger btn-xs"  onclick="delete_btn(this)">删除</button>\n' +
                    '\t\t\t\t\t\t\t\t\t</td>\n' +
                    '\t\t\t\t\t\t\t\t\t<td></td>\n' +
                    '\t\t\t\t\t\t\t\t</tr>';
            }
            $('tbody').html(html);

            //获取响应的总数据条数
            var total_count = data[0].total_count;
            //写入指定位置
            $('#total').text(total_count);
            console.log(current_page);
            $('#current-page').text(current_page);
            var total_page = Math.ceil(total_count / pageNumber);
            $('#total-page').text(total_page);

        } else if (result.code == 100) {
            $('tbody').html('还没有管理员数据');
            $('total').text(0);
            $('current-page').text(1);
            $('total-page').text(1);
        }
    }

    //详情
    function info_btn(obj){
        var tr = obj.parentNode.parentNode;
        //确定当前按钮所在的行
        tr = $(tr);


        var buildingName = tr.find('td:eq(2)').text();
        $('#info_buildingName').val(buildingName);

        var buildingInfo = tr.find('td:eq(3)').text();
        $('#info_building-info').val(buildingInfo);

        var adminId = tr.find('td:eq(4)').text();
        $('#info_AdminId').val(adminId);
    }

    //编辑
    function edit_btn(obj){
        var tr = obj.parentNode.parentNode;
        //确定当前按钮所在的行
        tr = $(tr);
        //获取第一列中的input元素
        var input = tr.find('td:eq(0)').children('input')[0];
        //获取存储在input元素上data-id的属性值
        var id = input.dataset.id;
        $('#hidden-id').val(id);

        var buildingName = tr.find('td:eq(2)').text();
        $('#edit_buildingName').val(buildingName);

        var buildingInfo = tr.find('td:eq(3)').text();
        $('#edit_building-info').val(buildingInfo);

        var adminId = tr.find('td:eq(4)').text();
        $('#edit_adminId').val(adminId);
    }

    $('#editBuilding-btn').click(function (){
        var id = $('#hidden-id').val();
        // var building = $('#edit_add_building').val().trim();
        // var buildingName = $('#edit_dormitory_name').val().trim();
        var buildingInfo = $('#edit_building-info').val();
        // var adminId = $('select[name="edit_adminId"]').val().trim();

        var ok = true;

        if (buildingInfo == ''){
            ok = false;
            layer.msg('填写完整的数据信息!');
            return
        }

        if (ok) {
            $.ajax({
                url:'../buildingManager',
                type:'post',
                dataType:'json',
                data:{
                    'id':id,
                    'buildingInfo':buildingInfo,
                    'method':'edit'
                },
                success:function (result){
                    if (result.code == 200){
                        layer.msg('修改成功');
                        setTimeout(function (){
                            window.location.reload();
                        },500)
                    }else {
                        layer.msg('修改失败');
                    }
                },
                error:function (){
                    layer.msg('网络异常');
                }
            })
        }
    })

    // 删除
    function delete_btn(obj) {
        layer.confirm('确认删除?', {icon: 2}, function () {
            //确认是哪一个删除按钮被点击
            var tr = obj.parentNode.parentNode;
            //确定当前按钮所在的行
            tr = $(tr);
            //获取第一列中的input元素
            var input = tr.find('td:eq(0)').children('input')[0];
            //获取存储在input元素上data-id的属性值
            var id = input.dataset.id;
            //获取对应行id
            $.ajax({
                url:'../buildingManager',
                type:'post',
                dataType:'json',
                data:{
                    'id':id,
                    'method':'delete'
                },
                success:function (result) {
                    if (result.code == 200) {
                        layer.msg('删除成功');
                        setTimeout(function (){
                            window.location.reload();

                        },1000)
                    } else {
                        layer.msg('删除失败');
                    }
                },
                error:function () {
                    layer.msg('网络异常');
                }
            })

            layer.msg(id, {icon: 1});
        }, function () {
            // layer.msg('点击取消的回调');
        });
    }

</script>


</body>
</html>
